<style type="text/css">

.global_form > div {
    width: 500px;
}

.global_form div.form-label {
    float: none;
    margin: 0;
    padding: 0 0 5px;
    text-align: left;
}

.global_form div.form-wrapper {
    margin-top: 10px;
}

.form-elements {
    padding: 0px 12px 12px 100px;
}

#preview_content{
    margin-top : 5px;
	border : 1px solid #C6C8C6;
    padding : 5px;
}
#previewTangle-wrapper, #buttons-wrapper  {
    margin-top: -10px;
}
#pro_image-wrapper,#pro_description-wrapper,#pro_title-wrapper{
    display:none;
}
#ads_image-wrapper,#ads_description-wrapper{
    display:none;
}
#previewText{
    font-size: 11pt;
}
#submit.disabled{
    background: none repeat scroll 0 0 #F2F2F2;
    color: #BBBBBB;
}
#addads{
    color:white;
}
#addpro{
    color:white;
}
</style>
<?php $this->headScript()
        ->appendFile($this->layout()->staticBaseUrl . 'application/modules/Talktangle/externals/scripts/File.Upload.js')
?>

<div class="create-form">
<?php //echo $this->form->render($this) ?>

<!-- <div id="image"></div>-->
<form id="<?php echo $this->form->getAttrib('id');?>" name="<?php echo $this->form->getAttrib('name');?>" enctype="multipart/form-data" action="<?php echo $this->escape($this->form->getAction()) ?>" method="<?php echo $this->escape($this->form->getMethod()) ?>" class="global_form">
    <div>
        <div>
            <h3>
                <?php echo $this->translate($this->form->getTitle()) ?>
            </h3>
            <p class="form-description"><?php echo $this->translate($this->form->getDescription()) ?></p>
            <div class="form-elements">
                <?php echo $this->form->getDecorator('FormErrors')->setElement($this->form)->render("");?>
                <?php if($this->form->getDecorator('FormMessages')->getMessages()) echo $this->form->getDecorator('FormMessages')->setElement($this->form)->render('');?> 
                
                <?php echo $this->form->title; ?>
                <?php echo $this->form->content; ?>
                
                <?php if($this->viewer->type == 'company'):?>
                <?php echo $this->form->duration; ?>
                <?php echo $this->form->pro_title; ?>
                <?php echo $this->form->pro_image; ?>
                <?php echo $this->form->pro_description; ?>
                <?php //echo $this->form->ads_title; ?>
                <?php echo $this->form->ads_image; ?>
                <?php echo $this->form->ads_description; ?>
                <?php endif?>

                <?php echo $this->form->file_id; ?>      
                <?php echo $this->form->pro_file_id; ?>             
                <?php echo $this->form->previewTangle; ?>
                <?php echo $this->form->preview; ?>
                <?php echo $this->form->buttons; ?>
            </div>
         </div>
    </div>
</form> 
</div>

<script type="text/javascript">

function openAdsform(){
        var href = en4.core.baseUrl + 'talktangle/ads/create';
        this.location.href = href;
}

en4.core.runonce.add(function() {

    <?php if($this->viewer->type == 'company'):?>
       
        var stringel = '<div><a id="addads" type="button" href="javascript:void(0);" onclick="ShowAds(this)">Show Ads</a></div>';
        var el = Elements.from(stringel);
        el.inject($('pro_description-wrapper'),'after');
        
        var stringel = '<div><a id="addpro" type="button" href="javascript:void(0);" onclick="ShowPromotions(this)">Show Promotion</a></div>';
        var el = Elements.from(stringel);
        el.inject($('duration-wrapper'),'after');

    <?php endif?>


    
    $('submit').set('disabled','1');
    $('submit').addClass('disabled');  
    
    var preview = new Element('div', {
        'id' : 'preview_content',
        styles : {
            'display' : 'none',
        }
    }).inject($('previewTangle'),'after');    
    
    var preview_text = new Element('div', {
            'id' : 'previewText',
            }).inject($('preview_content'));      
            
            
	$('ads_image').addEvent('change', function(){
		var upload = new Upload({
			url: en4.core.baseUrl + 'talktangle/talktangle/adsimage/format/json',
			images: ['ads_image'],
//                onRequest: function(){
//                    $('preview_image').set('html', '<img src="'+ en4.core.baseUrl + 'application/modules/Core/externals/images/loading.gif' +'">');
//                  },               
			onComplete: function(response){   			 
                response = JSON.decode(response);
				//$('preview_image').getElement('img').set('src',response.preview_url);
                $('file_id').set('value',response.file_id);
			}
		});		
	   upload.send();      
    });
    
	$('pro_image').addEvent('change', function(){
		var upload = new Upload({
			url: en4.core.baseUrl + 'talktangle/talktangle/promotionimage/format/json',
			images: ['pro_image'],
//                onRequest: function(){
//                    $('preview_image').set('html', '<img src="'+ en4.core.baseUrl + 'application/modules/Core/externals/images/loading.gif' +'">');
//                  },               
			onComplete: function(response){   			 
                response = JSON.decode(response);
				//$('preview_image').getElement('img').set('src',response.preview_url);
                $('pro_file_id').set('value',response.file_id);
                console.log(response.file_id);
			}
		});		
	   upload.send();      
    });
});

    function previewTalktangle(){
        request = new Request.JSON({
              url : en4.core.baseUrl + 'talktangle/ajax/previewtalktangle',
              data : {
                format : 'json',
                content : $('content').get('value')
              },
              onRequest: function(){
                $('previewText').set('html', '<img src="'+ en4.core.baseUrl + 'application/modules/Core/externals/images/loading.gif' +'">');
              },
              onComplete: function(response) {
                  $('previewText').set('html', response);
                  $('preview').set('value', response);
                  $('preview_content').setStyles({'display': 'block'});
                  $('submit').set('disabled','');
                  $('submit').removeClass('disabled');                    
               }
            });
            request.send();
            
    }    
    
    function ShowAds(el){
        var show = el.retrieve('show');
        console.log(show);
        if (show =='none' || show == null) {
            el.store('show','block');
            el.set('text','Hide ads');
            var uploadel = $('ads_image-wrapper');
            if(uploadel) uploadel.style.display = 'block';
            var uploadel = $('ads_description-wrapper');
            if(uploadel) uploadel.style.display = 'block';
            
//            var hadUpload = $('imageId');
//            if (hadUpload) {
//                var value = hadUpload.get('value');
//                if(value > 0){
//                    var ads_preview = $('preview_ads');
//                    if(ads_preview) ads_preview.style.display = 'block';
//                } 
//            }
        } 
        else {
            el.store('show','none');
            el.set('text','Show ads');
            var uploadel = $('ads_image-wrapper');
            if(uploadel) uploadel.style.display = 'none';
            var uploadel = $('ads_description-wrapper');
            if(uploadel) uploadel.style.display = 'none';
//            var hadUpload = $('imageId');
//            if (hadUpload) {
//                var value = hadUpload.get('value');
//                if(value > 0){
//                    var ads_preview = $('preview_ads');
//                    if(ads_preview) ads_preview.style.display = 'none';
//                } 
//            }
        }
    }    

    function ShowPromotions(el){
        var show = el.retrieve('show');
        if (show =='none' || show == null) {
            el.store('show','block');
            el.set('text','Hide promotion');
            var uploadel = $('pro_image-wrapper');
            if(uploadel) uploadel.style.display = 'block';
            var uploadel = $('pro_description-wrapper');
            if(uploadel) uploadel.style.display = 'block';
            var uploadel = $('pro_title-wrapper');
            if(uploadel) uploadel.style.display = 'block';            
        } 
        else {
            el.store('show','none');
            el.set('text','Show promotion');
            var uploadel = $('pro_image-wrapper');
            if(uploadel) uploadel.style.display = 'none';
            var uploadel = $('pro_description-wrapper');
            if(uploadel) uploadel.style.display = 'none';
            var uploadel = $('pro_title-wrapper');
            if(uploadel) uploadel.style.display = 'none';    
        }
    } 
    
</script>